<template>
    <div id="subPage">
        <div class="subPage_left">
            <div class="item left_one">
                <div class="left_one_top">
                    <div class="left_one_top_icon">
                        <img src="../../assets/images/ags/emp/left_empChange.png" />
                    </div>
                    <div class="left_one_top_title">近期人员变动</div>
                </div>
                <div class="left_one_bottom">
                    <div id="emp_change"></div>
                </div>
            </div>
            <div class="item left_two">
                <div class="left_two_top">
                    <div class="left_two_top_icon">
                        <img src="../../assets/images/ags/emp/left_status.png" />
                    </div>
                    <div class="left_two_top_title">实时状态</div>
                </div>
                <div class="left_two_center">
                    <div class="tabs">
                        <div
                            v-for="(item, index) in stateList"
                            :key="index"
                            :class="[attendState == item.id ? 'active' : '', 'tab']" @click="getAttendState(item)">
                            {{ item.name }}
                        </div>
                    </div>
                    <div class="echarts">
                        <div class="echartsBox">
                            <div class="canvas-center-box">
                                <div class="num">{{ attendStateNum }}</div>
                                <div class="text">总人数/人</div>
                            </div>
                            <div id="drawOnWholeAttendEmp" v-show="attendState == 0 || attendState == 1"></div>
                            <div id="drawOnAttendEmp" v-show="attendState == 2"></div>
                        </div>
                        <div class="echartsBox_list">
                            <vue-seamless-scroll ref="attendStateEmpMsgList" :data="attendStateEmpMsgList" :class-option="defaultOption">
                                <ul>
                                    <li v-for="(item, index) in attendStateEmpMsgList" :key="index">
                                        <em v-bind:style="{background: item.color}"></em>
                                        <span style="width:0.6rem">{{item.name}}</span>
                                        <!-- <span style="width:0.45rem"
                                        >({{item.state}}台)</span
                                    > -->
                                        <span>{{ item.num }}人</span>
                                    </li>
                                </ul>
                            </vue-seamless-scroll>
                        </div>
                    </div>
                </div>
                <div class="left_two_bottom">
                    <div class="title">
                        <div class="text">出勤率</div>
                    </div>
                    <vue-seamless-scroll ref="seamlessScroll" :data="attendStateEmpMsgList" :class-option="attendanceOption_emp" style="width: 100%;overflow:hidden;height: 73%">
                        <div class="round_box">
                            <div class="radial-statistics" v-for="(item, index) in attendStateEmpMsgList" :key="index">
                                <div class="radial-progress">
                                    <div class="circle">
                                        <div class="mask full" :style="rotateFillList[index]">
                                            <div class="fill" :style="rotateFillList[index]"></div>
                                        </div>
                                        <div class="mask half">
                                            <div class="fill" :style="rotateFillList[index]"></div>
                                            <div class="fill fix" :style="rotatefixList[index]"></div>
                                        </div>
                                        <div class="shadow"></div>
                                    </div>
                                    <div class="inset">
                                        <div class="wave -one"></div>
                                        <div class="wave -two"></div>
                                        <div class="wave -three"></div>
                                        <div class="wave -four"></div>
                                        <div class="wave-percentage">{{ item.pre }}%</div>
                                    </div>
                                </div>
                                <div class="wave-title">{{ item.name }}</div>
                            </div>
                        </div>
                    </vue-seamless-scroll>
                </div>
            </div>
        </div>
        <div class="center">
            <div class="top">
                <div id="map" class="diy"></div>
            </div>
            <div class="bottom">
                <div class="bottom_top">
                    <div class="bottom_top_icon">
                        <img src="../../assets/images/ags/equip/status.png" />
                    </div>
                    <div class="bottom_top_title">进出场记录</div>
                </div>
                <div class="bottom_table">
                    <div class="t-header">
                        <div class="td">姓名</div>
                        <div class="td">岗位</div>
                        <div class="td">出/入</div>
                        <div class="td">时间</div>
                        <div class="td">今日出勤时长(小时)</div>
                    </div>
                    <div class="t-body">
                        <vue-seamless-scroll ref="seamlessScroll" :data="attendRecordList" :class-option="attendanceOption" style="width: 100%;overflow:hidden;height: 90%">
                            <div class="tr" v-for="item in attendRecordList" :key="item.id">
                                <div class="td">{{ item.empName }}</div>
                                <div class="td">{{ item.workTypeName }}</div>
                                <div class="td">{{ item.direction === 1 ? "进" : "出" }}</div>
                                <div class="td">{{ item.time }}</div>
                                <div class="td">{{ item.workTimes }}</div>
                            </div>
                        </vue-seamless-scroll>
                    </div>
                </div>
            </div>
        </div>
        <div class="subPage_right">
            <div class="item right_one">
                <div class="right_one_top">
                    <div class="right_one_top_icon">
                        <img src="../../assets/images/ags/emp/right_emp.png" />
                    </div>
                    <div class="right_one_top_title">人员分析</div>
                </div>
                <div class="right_one_bottom">
                    <div class="content_item" style="margin-right:0.1rem">
                        <div class="icon">
                            <div class="icon_user">
                                <img src="../../assets/images/ags/emp/user_icon.png" />
                            </div>
                            <div class="emp_count">在职总人数</div>
                        </div>
                        <div class="count">{{ empAnalysis.total || 0 }}</div>
                    </div>
                    <div class="content_item">
                        <div class="icon">
                            <div class="icon_user">
                                <img src="../../assets/images/ags/emp/user_icon.png" />
                            </div>
                            <div class="emp_count">新入职人数</div>
                        </div>
                        <div class="count">{{ empAnalysis.empEnterNum || 0 }}</div>
                    </div>
                    <div class="content_item" style="margin:0 0.1rem 0 0">
                        <div class="icon">
                            <div class="icon_user">
                                <img src="../../assets/images/ags/emp/user_icon.png" />
                            </div>
                            <div class="emp_count">考勤比</div>
                        </div>
                        <div class="count">{{ empAnalysis.attendRate || 0 }}%</div>
                    </div>
                    <div class="content_item">
                        <div class="icon">
                            <div class="icon_user">
                                <img src="../../assets/images/ags/emp/user_icon.png" />
                            </div>
                            <div class="emp_count">离职人数</div>
                        </div>
                        <div class="count">{{ empAnalysis.empOuterNum || 0 }}</div>
                    </div>
                </div>
            </div>
            <!-- <div class="item right_two">
                <div class="right_two_top">
                    <div class="right_two_top_icon">
                        <img src="../../assets/images/ags/emp/right_walk.png" />
                    </div>
                    <div class="right_two_top_title">人行记录</div>
                </div>
                <div class="right_two_bottom">
                    <div class="right_two_bottom_left">
                        <div class="right_two_bottom_item">
                            <div class="right_two_bottom_icon">
                                <img src="../../assets/images/ags/index/in.png" />
                                <div class="count">
                                    <span :class="empRecordObj.inNum > 99 ? 'scorllText' : ''">{{ empRecordObj.inNum || 0 }}</span>
                                </div>
                            </div>
                            <div class="right_two_bottom_unit">进场人数/人</div>
                        </div>
                        <div class="right_two_bottom_item" style="margin-top:10px">
                            <div class="right_two_bottom_icon">
                                <img src="../../assets/images/ags/index/out.png" />
                                <div class="count">
                                    <span :class="empRecordObj.outNum > 99 ? 'scorllText' : ''">{{ empRecordObj.outNum || 0 }}</span>
                                </div>
                            </div>
                            <div class="right_two_bottom_unit">出场人数/人</div>
                        </div>
                    </div>
                    <div class="right_two_bottom_right">
                        <Carousel autoplay :value="0" loop dots="none">
                            <CarouselItem v-for="item in empRecordObj.records" :key="item.empId">
                                <div class="right_two_bottom_top">
                                    <div class="name">{{ item.empName }}</div>
                                    <div class="job">{{ item.workTypeName }}</div>
                                </div>
                                <div class="right_two_bottom_bottom">
                                    <div class="icon">
                                        <img :src="item.imgUrl || empDefault" />
                                    </div>
                                    <div class="introduction">
                                        <div class="introduction_item" v-if="item.inTime">
                                            <div class="top">
                                                <div class="icon"></div>
                                                <div class="title">进</div>
                                            </div>
                                            <div class="bottom">
                                                <span>{{ item.inTime }}</span>
                                            </div>
                                        </div>
                                        <div class="introduction_item" v-if="item.outTime">
                                            <div class="top">
                                                <div class="icon"></div>
                                                <div class="title">出</div>
                                            </div>
                                            <div class="bottom">
                                                <span>{{ item.outTime }}</span>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </CarouselItem>
                        </Carousel>
                    </div>
                </div>
            </div> -->
            <!-- <div class="item right_three">
                <div class="right_three_top">
                    <div class="right_three_top_icon">
                        <img src="../../assets/images/ags/emp/right_car.png" />
                    </div>
                    <div class="right_three_top_title">车行记录</div>
                </div>
                <div class="right_three_bottom">
                    <div class="right_three_bottom_left">
                        <div class="right_three_bottom_item">
                            <div class="right_three_bottom_icon">
                                <img src="../../assets/images/ags/index/in_car.png" />
                                <div class="count">
                                    <span :class="carRecordObj.inNum > 99 ? 'scorllText' : ''">{{ carRecordObj.inNum || 0 }}</span>
                                </div>
                            </div>
                            <div class="right_three_bottom_unit">进场车辆/辆</div>
                        </div>
                        <div class="right_three_bottom_item" style="margin-top:10px">
                            <div class="right_three_bottom_icon">
                                <img src="../../assets/images/ags/index/out_car.png" />
                                <div class="count">
                                    <span :class="carRecordObj.outNum > 99 ? 'scorllText' : ''">{{ carRecordObj.outNum || 0 }}</span>
                                </div>
                            </div>
                            <div class="right_three_bottom_unit">出场车辆/辆</div>
                        </div>
                    </div>
                    <div class="right_three_bottom_right">
                        <Carousel autoplay :value="0" loop dots="none">
                            <CarouselItem v-for="(item, index) in carRecordObj.records" :key="index">
                                <div class="right_three_bottom_top">
                                    <div class="name">{{ item.licensePlate }}</div>
                                    <div class="job">{{ item.name }}</div>
                                </div>
                                <div class="right_three_bottom_bottom">
                                    <div class="icon">
                                        <img :src="item.imgUrl || carDefault" />
                                    </div>
                                    <div class="introduction">
                                        <div class="introduction_item" v-if="item.inTime">
                                            <div class="top">
                                                <div class="icon"></div>
                                                <div class="title">进</div>
                                            </div>
                                            <div class="bottom">
                                                <span>{{ item.inTime }}</span>
                                            </div>
                                        </div>
                                        <div class="introduction_item" v-if="item.outTime">
                                            <div class="top">
                                                <div class="icon"></div>
                                                <div class="title">出</div>
                                            </div>
                                            <div class="bottom">
                                                <span>{{ item.outTime }}</span>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </CarouselItem>
                        </Carousel>
                    </div>
                </div>
            </div> -->
        </div>
    </div>
</template>

<script>
import {
    getAgsEmpRecordAnalysis,
    getAgsCarRecordAnalysis,
    getBoardEmpAnalysis
} from "@/api/md-board";
const { Echarts } = require("@/sever/Echarts");
import vueSeamlessScroll from "vue-seamless-scroll";
import { getempworkdata, getMapEmpList } from "@/api/api";
import { initColors } from "@/mixins/colorObj";
import { format } from "@/sever/dateutil";
export default {
    name: "index",
    mixins: [initColors],
    components: {
        vueSeamlessScroll
    },
    data() {
        return {
            //组织机构Id
            deptId: "",
            //人员默认图
            empDefault: require("../../assets/images/ags/emp/emp-default.png"),
            carDefault: require("../../assets/images/ags/emp/car-default.png"),
            //人员出入列表
            classOption: {
                step: 0.5
            },
            classOption2: {
                step: 0.5,
                limitMoveNum: 3
            },
            //经度
            lat: "",
            //纬度
            lnt: "",
            //地图人员数组
            mapList: [],
            //时间
            dateArr: [new Date(new Date().valueOf() - 604800000), new Date()],
            // 人员分析
            empAnalysis: {},
            //人行记录
            empRecordObj: {},
            //车辆记录
            carRecordObj: {},
            //进出场纪录
            attendRecordList: [],

            /**
             * 人员信息数据
             * */
            //出勤状态
            attendStateEmpMsgList: [],
            attendStateEmpList: [],
            stateList: [
                {
                    id: 0,
                    name: "全部"
                },
                {
                    id: 1,
                    name: "管理人员"
                },
                {
                    id: 2,
                    name: "施工人员"
                }
            ],
            attendState: 0,
            attendStateNum: 0,
            //出勤状态or出勤率
            appBoardEmpNumDTO: {},
            // 入职人员
            enterNumList: [],
            // 离职人员
            outerNumList: [],
            //时间
            weekData: [],
            fill_rotation: "",
            fix_rotation: "",
            rotateFillList: [],
            rotatefixList: []
        };
    },
    computed: {
        defaultOption() {
            return {
                step: 0.2, // 数值越大速度滚动越快
                limitMoveNum: 2, // 开始无缝滚动的数据量
                hoverStop: true, // 是否开启鼠标悬停stop
                direction: 1, // 0向下 1向上 2向左 3向右
                openWatch: true, // 开启数据实时监控刷新dom
                singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
                singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
                waitTime: 1000 // 单步运动停止的时间(默认值1000ms)
            };
        },
        attendanceOption() {
            return {
                step: 0.2, // 数值越大速度滚动越快
                limitMoveNum: 6, // 开始无缝滚动的数据量
                hoverStop: true, // 是否开启鼠标悬停stop
                direction: 1, // 0向下 1向上 2向左 3向右
                openWatch: true, // 开启数据实时监控刷新dom
                singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
                singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
                waitTime: 1000 // 单步运动停止的时间(默认值1000ms)
            };
        },
        attendanceOption_emp(){
            return {
                step: 0.2, // 数值越大速度滚动越快
                limitMoveNum: 5, // 开始无缝滚动的数据量
                hoverStop: true, // 是否开启鼠标悬停stop
                direction: 1, // 0向下 1向上 2向左 3向右
                openWatch: true, // 开启数据实时监控刷新dom
                singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
                singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
                waitTime: 1000 // 单步运动停止的时间(默认值1000ms)
            };
        }
    },
    methods: {
        empChangeCharts() {
            let chartDom = document.getElementById("emp_change");
            let myChart = this.$echarts.init(chartDom);
            let option;

            option = {
                tooltip: {
                    trigger: "axis"
                },
                color: ["#E1B34A", "#78A5ED"],
                legend: {
                    left: "39%",
                    data: ["进场人员", "出场人员"],
                    textStyle: {
                        color: "#C6E9FC",
                        fontSize: "0.12rem",
                        fontWeight: 400
                    }
                },
                grid: {
                    left: "3%",
                    right: "5%",
                    bottom: "3%",
                    height: "70%",
                    containLabel: true
                },
                xAxis: {
                    type: "category",
                    boundaryGap: false,
                    data: this.weekData,
                    axisLine: {
                        show: true //去除轴线
                    },
                    axisLabel: {
                        fontSize: "0.12rem",
                        fontFamily: "Microsoft YaHei-Regular, Microsoft YaHei",
                        fontWeight: 400,
                        color: "#C6E9FC"
                    }
                },
                yAxis: {
                    type: "value",
                    axisLine: {
                        show: true //去除轴线
                    },
                    axisLabel: {
                        fontSize: "0.12rem",
                        fontFamily: "Microsoft YaHei-Regular, Microsoft YaHei",
                        fontWeight: 400,
                        color: "#C6E9FC"
                    },
                    splitLine: {
                        //分割线
                        lineStyle: {
                            color: "#112131",
                            type: "dashed"
                        }
                    }
                },
                series: [
                    {
                        name: "进场人员",
                        type: "line",
                        stack: "Total",
                        data: this.enterNumList,
                        smooth: true,
                        areaStyle: {
                            opacity: 0.3,
                            color: {
                                type: "linear",
                                x: 0,
                                y: 0,
                                x2: 0,
                                y2: 1,
                                colorStops: [
                                    {
                                        offset: 0,
                                        color: "#CFA647" // 0% 处的颜色
                                    },
                                    {
                                        offset: 1,
                                        color: "rgba(0,0,0,0)" // 100% 处的颜色
                                    }
                                ],
                                global: false
                            }
                        }
                    },
                    {
                        name: "出场人员",
                        type: "line",
                        stack: "Total",
                        data: this.outerNumList,
                        smooth: true,
                        areaStyle: {
                            opacity: 0.3,
                            color: {
                                type: "linear",
                                x: 0,
                                y: 0,
                                x2: 0,
                                y2: 1,
                                colorStops: [
                                    {
                                        offset: 0,
                                        color: "#5179AD" // 0% 处的颜色
                                    },
                                    {
                                        offset: 1,
                                        color: "rgba(0,0,0,0)" // 100% 处的颜色
                                    }
                                ],
                                global: false
                            }
                        }
                    }
                ]
            };
            option && myChart.setOption(option);
            window.addEventListener("resize", function() {
                myChart.resize();
            });
        },
        deepClone(obj) {
            //判断拷贝的要进行深拷贝的是数组还是对象，是数组的话进行数组拷贝，对象的话进行对象拷贝
            let objClone = Array.isArray(obj) ? [] : {};
            if (obj && typeof obj === "object") {
                for (let key in obj) {
                    if (obj.hasOwnProperty(key)) {
                        if (obj[key] && typeof obj[key] === "object") {
                            objClone[key] = this.deepClone(obj[key]);
                        } else {
                            objClone[key] = obj[key];
                        }
                    }
                }
            }
            return objClone;
        },
        /**
         * 删除数组中指定对象
         * @param {OBject} arr
         * @param {function} func 返回ture或false
         */
        arrDelete(arr, func) {
            arr.forEach((item, i) => {
                if (func(item)) {
                    arr.splice(i, 1);
                }
            });
        },

        drawOnAttendEmp() {
            let chartDom = document.getElementById("drawOnAttendEmp");
            let msg = {
                // color: [
                //     "#7A6AF8",
                //     "#547BFF",
                //     "#F8C44F",
                //     "#00F5FF",
                //     "#458B00",
                //     "#9370DB",
                //     "#7A67EE"
                // ],
                name: "",
                radius: ["50%", "70%"],
                roseType: false,
                legend: true,
                areaStyle: "",
                labelPosition: "inner",
                formatter: null,
                center: ["50%", "50%"],
                xName: "",
                type: "pie",
                // backgroundColor: "#032953",
                graphicFlag: true,
                centerLabel: "",
                graphic: null,
                lineLabelFlag: false
            };
            let data = {
                dom: chartDom,
                title: "",
                legend: false,
                seriesData: this.attendStateEmpList,
                xData: ""
            };
            Echarts.init(msg, data);
        },
        drawOnWholeAttendEmp() {
            let attendStateEmpList = [];
            attendStateEmpList = this.deepClone(this.attendStateEmpList);
            let chartDom = document.getElementById("drawOnWholeAttendEmp");
            document.getElementById("drawOnWholeAttendEmp").removeAttribute("_echarts_instance_");
            let myChart = this.$echarts.init(chartDom);
            let option;
            let BorderWidth = "6";
            //反方向剩下部分的样式
            let placeHolderStyle = {
                normal: {
                    // label: {
                    //     show: false,
                    //     position: "center"
                    // },
                    labelLine: {
                        show: false
                    },
                    color: "#3A4154",
                    borderColor: "#3A4154",
                    borderWidth: 2
                },
                emphasis: {
                    color: "#dedede",
                    borderColor: "#dedede",
                    borderWidth: 0
                }
            };
            let totalNum = 0;
            attendStateEmpList.forEach(item => {
                totalNum += item["value"];
            });
            attendStateEmpList.forEach((item, index) => {
                item["data"] = [
                    { value: item.value, name: "" },
                    {
                        value: totalNum - item.value,
                        name: "总数差",
                        itemStyle: placeHolderStyle
                    }
                ];
                item["type"] = "pie";
                item["clockWise"] = false;
                item["hoverAnimation"] = false;
                if (index == 0) {
                    item["radius"] = ["85%", "89%"];
                }
                if (index == 1) {
                    item["radius"] = ["75%", "79%"];
                }
                if (index == 2) {
                    item["radius"] = ["65%", "69%"];
                }
                item["itemStyle"]["normal"]["label"] = {
                    show: false,
                    position: "outside"
                };
                item["itemStyle"]["normal"]["labelLine"] = {
                    show: false,
                    length: 100,
                    smooth: 0.5
                };
                item["itemStyle"]["normal"]["borderWidth"] = BorderWidth;
                item["itemStyle"]["normal"]["shadowBlur"] = 10;
                item["itemStyle"]["normal"]["shadowColor"] = "rgba(0, 0, 0, 0)";
            });
            option = {
                tooltip: {
                    trigger: "item",
                    confine: true
                    // formatter: function(params) {
                    //     return params.value==0? '':`${params.name}${params.value} <br/>`
                    // }
                },
                color: ["#7B79FF", "#FFB0E2", "#59CFFF"],
                series: attendStateEmpList
            };
            option && myChart.setOption(option);
            window.addEventListener("resize", function() {
                myChart.resize();
            });
        },
        //人员分析
        getBoardEmpAnalysisFn() {
            let params = {
                deptId: this.deptId,
                startDate: format(this.dateArr[0]),
                endDate: format(this.dateArr[1])
            };
            getBoardEmpAnalysis(params).then(res => {
                if (res.code == 200) {
                    this.empAnalysis = res.data;
                    let decimalPosition = String(this.empAnalysis.attendRate).indexOf(".") + 1;
                    let decimalCount = String(this.empAnalysis.attendRate).length - decimalPosition;
                    this.empAnalysis["decimalCount"] = decimalCount;
                } else {
                    this.$Message.warning(res.msg);
                }
            })
            .catch(error => console.log(error));
        },
        // 人行记录
        getBoardEmpRecordAnalysisFn() {
            let params = {
                deptId: this.deptId,
                startDate: format(),
                endDate: format()
            };
            getAgsEmpRecordAnalysis(params).then(res => {
                    if (res.code == 200) {
                        this.empRecordObj = res.data;
                        this.empRecordObj.records.forEach(item => {
                            item["imgUrl"] = item.inImgUrl ? item.inImgUrl : item.outImgUrl;
                            item["inTime"] = item.inTime ? item.inTime.substring(0, 16) : "";
                            item["outTime"] = item.outTime ? item.outTime.substring(0, 16) : "";
                        });
                    } else {
                        this.$Message.warning(res.msg);
                    }
                })
                .catch(error => console.log(error));
        },
        //车辆记录
        getBoardCarRecordAnalysisFn() {
            let params = {
                deptId: this.deptId,
                startDate: format(),
                endDate: format()
            };
            getAgsCarRecordAnalysis(params).then(res => {
                    if (res.code == 200) {
                        this.carRecordObj = res.data;
                        this.carRecordObj.records.forEach(item => {
                            item["imgUrl"] = item.inImgUrl ? item.inImgUrl : item.outImgUrl;
                            item["inTime"] = item.inTime ? item.inTime.substring(0, 16) : "";
                            item["outTime"] = item.outTime ? item.outTime.substring(0, 16) : "";
                        });
                    } else {
                        this.$Message.warning(res.msg);
                    }
                })
                .catch(error => console.log(error));
        },
        //人员类型数据
        getEmpDataFn() {
            let params = {
                deptId: this.deptId
            };
            getempworkdata(params).then(res => {
                if (res.code == 200) {
                    this.attendRecordList = res.data.attendRecordList || [];
                    this.attendRecordList.forEach(i => {
                        if (i.time) {
                            i.time = i.time.substring(5, i.time.length);
                        } else {
                            i.time = "";
                        }
                    });
                    this.appBoardEmpNumDTO = res.data.appBoardEmpNumDTO || {};
                    let weekDataList = res.data.weekDataList || [];
                    let localeNum = 0,
                        offLocaleNum = 0,
                        onLocaleNum = 0,
                        onOffLocaleNum = 0;
                    for ( let i = 0; i < this.appBoardEmpNumDTO.attendStateEmpList.length; i++) {
                        if (this.appBoardEmpNumDTO.attendStateEmpList[i].workRoleId == 1) {
                            //管理人员
                            onLocaleNum += this.appBoardEmpNumDTO.attendStateEmpList[i].localeNum;
                            onOffLocaleNum += this.appBoardEmpNumDTO.attendStateEmpList[i].offLocaleNum;
                        } else if (this.appBoardEmpNumDTO.attendStateEmpList[i].workRoleId == 2) {
                            //施工人员
                            localeNum += this.appBoardEmpNumDTO.attendStateEmpList[i].localeNum;
                            offLocaleNum += this.appBoardEmpNumDTO.attendStateEmpList[i].offLocaleNum;
                        }
                    }
                    this.attendStateNum = onLocaleNum + onOffLocaleNum + localeNum + offLocaleNum;
                    this.attendStateEmpList.push(
                        {
                            value: onLocaleNum + onOffLocaleNum,
                            name: "管理人员-出勤",
                            itemStyle: {
                                normal: {
                                    color: this.colorList[0]
                                }
                            }
                        },
                        {
                            value: localeNum + offLocaleNum,
                            name: "施工人员-出勤",
                            itemStyle: {
                                normal: {
                                    color: this.colorList[1]
                                }
                            }
                        }
                    );
                    this.attendStateEmpList.forEach(i => {
                        let obj = {
                            num: i.value,
                            name: i.name.substring(0, 4),
                            state: i.name.substring(5, 7),
                            pre: this.attendStateNum == 0 ? 0 : parseInt((i.value / this.attendStateNum) *  100),
                            color: i.itemStyle.normal.color
                        };
                        this.attendStateEmpMsgList.push(obj);
                    });
                    this.$refs.attendStateEmpMsgList.reset();
                    setTimeout(() => {
                        this.circleCountFn();
                    }, 500);
                    weekDataList.forEach(v => {
                        this.weekData.push(
                            v.date.substring(5, v.date.length)
                        );
                        this.enterNumList.push(v.enterNum);
                        this.outerNumList.push(v.outerNum);
                    });
                    if (this.attendState == 2) {
                        this.drawOnAttendEmp();
                    } else {
                        this.drawOnWholeAttendEmp();
                    }
                    this.empChangeCharts();
                } else {
                    this.$Message.warning(res.msg);
                }
            })
            .catch(error => console.log(error));
        },
        getAttendState(item) {
            this.attendState = item.id;
            this.attendStateNum = 0;
            this.attendStateEmpList = [];
            this.attendStateEmpMsgList = [];
            if (this.attendState == 0) {
                let localeNum = 0,
                    offLocaleNum = 0,
                    onLocaleNum = 0,
                    onOffLocaleNum = 0;
                for (let i = 0; i < this.appBoardEmpNumDTO.attendStateEmpList.length; i++) {
                    if (this.appBoardEmpNumDTO.attendStateEmpList[i].workRoleId == 1) {
                        //管理人员
                        onLocaleNum += this.appBoardEmpNumDTO.attendStateEmpList[i].localeNum;
                        onOffLocaleNum += this.appBoardEmpNumDTO.attendStateEmpList[i].offLocaleNum;
                    } else if (this.appBoardEmpNumDTO.attendStateEmpList[i].workRoleId == 2) {
                        //施工人员
                        localeNum += this.appBoardEmpNumDTO.attendStateEmpList[i].localeNum;
                        offLocaleNum += this.appBoardEmpNumDTO.attendStateEmpList[i].offLocaleNum;
                    }
                }
                this.attendStateEmpList.push(
                    {
                        value: onLocaleNum + onOffLocaleNum,
                        name: "管理人员-出勤",
                        itemStyle: {
                            normal: {
                                color: this.colorList[0]
                            }
                        }
                    },
                    {
                        value: localeNum + offLocaleNum,
                        name: "施工人员-出勤",
                        itemStyle: {
                            normal: {
                                color: this.colorList[1]
                            }
                        }
                    }
                );
            } else {
                let attendArr = [];
                for (let i = 0; i < this.appBoardEmpNumDTO.attendStateEmpList.length; i++) {
                    if (this.attendState == 1) {
                        let arr = [];
                        if (this.appBoardEmpNumDTO.attendStateEmpList[i].workRoleId == 1) {
                            arr = [
                                {
                                    value: this.appBoardEmpNumDTO.attendStateEmpList[i].localeNum + this.appBoardEmpNumDTO.attendStateEmpList[i].offLocaleNum,
                                    name: this.appBoardEmpNumDTO.attendStateEmpList[i].name + "-出勤",
                                    itemStyle: {
                                        normal: {
                                            color: this.colorList[i]
                                        }
                                    }
                                }
                            ];
                            attendArr.push(arr);
                        }
                    } else if (this.attendState == 2) {
                        let arr = [];
                        if (this.appBoardEmpNumDTO.attendStateEmpList[i].workRoleId == 2) {
                            arr = [
                                {
                                    value: this.appBoardEmpNumDTO.attendStateEmpList[i].localeNum + this.appBoardEmpNumDTO.attendStateEmpList[i].offLocaleNum,
                                    name: this.appBoardEmpNumDTO.attendStateEmpList[i].name + "-出勤",
                                    itemStyle: {
                                        normal: {
                                            color: this.colorList[i]
                                        }
                                    }
                                }
                            ];
                            attendArr.push(arr);
                        }
                    }
                }
                for (let i = 0; i < attendArr.length; i++) {
                    for (let j = 0; j < attendArr[i].length; j++) {
                        this.attendStateEmpList.push(attendArr[i][j]);
                    }
                }
            }
            for (let i = 0; i < this.attendStateEmpList.length; i++) {
                this.attendStateNum += this.attendStateEmpList[i].value;
            }
            this.attendStateEmpList.forEach(i => {
                let strs = i.name.split("-");
                let obj = {
                    num: i.value,
                    name: strs[0],
                    state: strs[1],
                    pre: this.attendStateNum == 0 ? 0 : parseInt((i.value / this.attendStateNum) * 100),
                    color: i.itemStyle.normal.color
                };
                this.attendStateEmpMsgList.push(obj);
            });
            this.$refs.seamlessScroll.reset();
            setTimeout(() => {
                this.circleCountFn();
            }, 500);
            if (this.attendStateEmpList.length == 0) {
                this.attendStateEmpList = [
                    {
                        value: 0,
                        name: "暂无数据",
                        itemStyle: {
                            normal: {
                                color: this.colorList[0]
                            }
                        }
                    }
                ];
            }
            if (this.attendState == 2) {
                this.drawOnAttendEmp();
            } else {
                this.drawOnWholeAttendEmp();
            }
        },
        //人员地图数据
        getMapEmp() {
            let params = {
                deptId: this.deptId,
                groupId: "",
                empName: ""
            };
            getMapEmpList(params)
                .then(res => {
                    if (res.code == 200) {
                        this.mapList = [];
                        let list = res.data.list;
                        this.workArray = res.data.list;
                        this.workArray.forEach(i => {
                            i.icon = i.iconUrl;
                        });
                        list.forEach(i => {
                            let obj = {
                                lat: i.lat,
                                lng: i.lng,
                                icon: i.iconUrl,
                                id: i.empId,
                                machTypeName: i.machTypeName,
                                groupName: i.groupName,
                                empName: i.empName,
                                phone: i.phone,
                                state: i.state,
                                time: i.time,
                                localeState: i.localeState || 0,
                                attendState: i.attendState || 0
                            };
                            this.mapList.push(obj);
                        });
                        let lat, lng;
                        let a = [];
                        let b = [];
                        this.mapList.forEach(i => {
                            a.push(i.lat);
                            b.push(i.lng);
                        });
                        this.getMap();
                    } else {
                        this.$Message.warning(res.msg);
                    }
                })
                .catch(error => {
                    console.log(error);
                });
        },
        //地图
        getMap() {
            let _that = this;
            this.mapObj = new AMap.Map("map", {
                resizeEnable: true, //是否监控地图容器尺寸变化
                expandZoomRange: true,
                mapStyle: "amap://styles/whitesmoke",
                zoom: 14, //初始化地图层级
                zooms:[3,16], //设置缩放级别范围 3-20 级
                center: [this.lng, this.lat] ,//初始化地图中心点
                // 高德地图卫星图配置（核心修改）
                baseMap: {
                    type: 'satellite'
                },
                layers: [new AMap.TileLayer.Satellite()], // 明确指定为卫星图（高德官方参数）
            });
            let list = this.mapList;
            for (let i = 0; i < list.length; i++) {
                let iconMarker;
                let marker = new AMap.Marker({
                    map: _that.mapObj,
                    position: [list[i].lng, list[i].lat],
                    content: `
                        <div class="marker-icon"></div>
                    `,
                    offset: new AMap.Pixel(-10, 0)
                })
                    .on("mousemove", e => {
                        if (iconMarker) {
                            iconMarker.show();
                            return;
                        }
                        let point = [list[i].lng, list[i].lat];
                        iconMarker = new AMap.Marker({
                            map: _that.mapObj,
                            position: point,
                            offset: new AMap.Pixel(-32, -45),
                            icon: new AMap.Icon({
                                image: require("./../../assets/images/ags/emp/map_icon.png"),
                                size: new AMap.Size(68, 80), //图标大小
                                imageSize: new AMap.Size(68, 80)
                            })
                        });
                        // 设置label标签
                        // label默认蓝框白底左上角显示，样式className为：amap-marker-label
                        iconMarker.setLabel({
                            offset: new AMap.Pixel(20, 20), //设置文本标注偏移量
                            content: `
                        <div class="marker-title">
                            <div class="p">${list[i].groupName}</div>
                            <div class="p">${list[i].empName}</div>
                        </div>
                    `, //设置文本标注内容
                            direction: "right" //设置文本标注方位
                        });
                    })
                    .on("mouseout", e => {
                        iconMarker.hide();
                    });
            }
        },
        circleCountFn() {
            this.rotateFillList = [];
            this.rotatefixList = [];
            this.attendStateEmpMsgList.forEach(item => {
                let rotateFill = {
                    transform: "rotate(" + Math.floor(item.pre * 1.8) + "deg)"
                };
                let rotatefix = {
                    transform: "rotate(" + Math.floor(item.pre * 1.8) * 2 + "deg)"
                };
                this.rotateFillList.push(rotateFill);
                this.rotatefixList.push(rotatefix);
            });
        }
    },
    mounted() {
        this.lat = this.$store.state.porjectObject.lat == undefined ? 30.592335 : this.$store.state.porjectObject.lat;
        this.lng = this.$store.state.porjectObject.lng == undefined ? 114.29484 : this.$store.state.porjectObject.lng;
        this.deptId = this.$store.state.porjectObject.deptId;
        this.getBoardEmpAnalysisFn();
        this.getBoardEmpRecordAnalysisFn();
        this.getBoardCarRecordAnalysisFn();
        this.getEmpDataFn();
        this.getMapEmp();
        this.getMap();
    }
};
</script>

<style scoped lang="scss">
@function pxToRem($val) {
    @return $val/100 + rem;
}
@font-face {
    font-family: "led regular";
    src: url("../../assets/font/ds-digib-webfont.woff") format("woff");
}
/deep/#subPage {
    width: 100%;
    height: 100%;
    min-width: pxToRem(1440);
    display: flex;
    justify-content: space-between;
    align-items: center;
    overflow: hidden;
    pointer-events: auto !important;
    .subPage_left,
    .subPage_right {
        width: pxToRem(440);
        min-width: pxToRem(440);
        height: 100%;
        overflow: hidden;
        display: flex;
        flex-flow: column nowrap;
        .item {
            width: 100%;
            height: pxToRem(320);
            background-image: url("../../assets/images/ags/index/left_panel.png");
            background-position: center;
            background-repeat: no-repeat;
            background-size: 100% 120%;
            padding: pxToRem(5) 0;
            box-sizing: border-box;
            margin-bottom: pxToRem(20);
        }
        .left_one {
            display: flex;
            flex-flow: column nowrap;
            .left_one_top {
                display: flex;
                justify-content: flex-start;
                margin-left: pxToRem(80);
                margin-top: pxToRem(10);
                .left_one_top_icon {
                    img {
                        width: pxToRem(28);
                        height: pxToRem(28);
                    }
                }
                .left_one_top_title {
                    width: pxToRem(200);
                    height: pxToRem(22);
                    font-size: pxToRem(22);
                    font-family: SourceHanSansCN-Medium;
                    line-height: pxToRem(25);
                    color: #a8dfff;
                    margin-left: pxToRem(10);
                }
            }
            .left_one_center {
                display: flex;
                justify-content: flex-start;
                margin-left: pxToRem(80);
                .left_one_center_line {
                    margin: pxToRem(10) 0 0 pxToRem(10);
                    width: pxToRem(10);
                    height: pxToRem(53);
                    border-right: 2px solid #0099ff;
                }
                .left_one_center_left {
                    .left_one_center_money {
                        padding: pxToRem(-10) 0 0 0;
                        span:first-of-type {
                            font-family: "led regular";
                            font-size: pxToRem(36);
                            color: #00f0ff;
                        }
                    }
                }
                .left_one_center_right {
                    margin: pxToRem(10) 0 0 pxToRem(10);
                    padding-top: pxToRem(5);
                }
            }
            .left_one_bottom {
                display: flex;
                flex-flow: column nowrap;
                height: 100%;
                width: 80%;
                margin: 0 0 0 pxToRem(55);
                #emp_change {
                    width: 100%;
                    height: 100%;
                }
            }
        }
        .left_two {
            display: flex;
            flex-flow: column nowrap;
            .left_two_top {
                display: flex;
                justify-content: flex-start;
                margin-left: pxToRem(80);
                margin-top: pxToRem(10);
                .left_two_top_icon {
                    img {
                        width: pxToRem(28);
                        height: pxToRem(24);
                    }
                }
                .left_two_top_title {
                    width: pxToRem(220);
                    height: pxToRem(22);
                    font-size: pxToRem(22);
                    font-family: SourceHanSansCN-Medium;
                    line-height: pxToRem(18);
                    color: #a8dfff;
                    margin-left: pxToRem(10);
                }
            }
            .left_two_center {
                display: flex;
                flex-flow: column nowrap;
                .tabs {
                    width: 100%;
                    padding: 0 pxToRem(25);
                    box-sizing: border-box;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    margin-top: pxToRem(10);
                    .tab {
                        width: pxToRem(70);
                        height: pxToRem(26);
                        background-image: url("../../assets/images/ags/equip/tabs.png");
                        background-repeat: no-repeat;
                        background-size: 100% 100%;
                        font-size: pxToRem(12);
                        font-family: Microsoft YaHei-Regular, Microsoft YaHei;
                        font-weight: 400;
                        color: #6bc9ff;
                        text-align: center;
                        line-height: pxToRem(26);
                        margin-right: pxToRem(7);
                        cursor: pointer;
                        &:hover {
                            color: #ffffff;
                            text-shadow: pxToRem(0) pxToRem(2) pxToRem(10)
                                #ffffff;
                            background-image: url("../../assets/images/ags/emp/device-tag-active-icon.png");
                        }
                        &.active {
                            color: #ffffff;
                            text-shadow: pxToRem(0) pxToRem(2) pxToRem(10)
                                #ffffff;
                            background-image: url("../../assets/images/ags/emp/device-tag-active-icon.png");
                        }
                    }
                }
                .echarts {
                    width: auto;
                    height: auto;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    margin-top: pxToRem(10);
                    margin-left: pxToRem(65);
                    .echartsBox {
                        position: relative;
                    }
                    #drawOnAttendEmp {
                        width: pxToRem(160);
                        height: pxToRem(130);
                    }
                    #drawOnWholeAttendEmp {
                        width: pxToRem(160);
                        height: pxToRem(130);
                    }
                    .echartsBox_list {
                        flex: 1;
                        max-height: pxToRem(60);
                        margin-left: pxToRem(20);
                        overflow: hidden;
                        ul {
                            width: 100%;
                            li {
                                width: 100%;
                                height: pxToRem(30);
                                display: flex;
                                justify-content: flex-start;
                                align-items: center;
                                font-size: pxToRem(12);
                                font-family: Microsoft YaHei-Regular,
                                    Microsoft YaHei;
                                font-weight: 400;
                                color: #d8f0fe;
                                // margin: auto;
                                em {
                                    width: pxToRem(7);
                                    height: pxToRem(7);
                                    margin-right: pxToRem(10);
                                    border-radius: 50%;
                                }
                                span {
                                    margin-right: pxToRem(5);
                                    overflow: hidden;
                                    text-overflow: ellipsis;
                                    white-space: nowrap;
                                }
                            }
                        }
                    }
                }
            }
            .left_two_bottom {
                display: flex;
                flex-flow: column nowrap;
                width: 73%;
                margin-left: pxToRem(65);
                height: 55%;
                .title {
                    display: flex;
                    justify-content: flex-start;
                    background-image: url("../../assets/images/ags/emp/left_tabline.png");
                    background-repeat: no-repeat;
                    background-size: 100% 100%;
                    margin-top: pxToRem(10);
                    .text {
                        font-size: pxToRem(18);
                        font-family: Microsoft YaHei-Regular, Microsoft YaHei;
                        font-weight: 400;
                        color: #a8dfff;
                        margin: pxToRem(-7) 0 pxToRem(3) pxToRem(15);
                    }
                }
                .round_box {
                    display: flex;
                    flex-wrap: wrap;
                    justify-content: flex-start;
                    margin-top: pxToRem(10);
                    // height: pxToRem(180);
                    flex: 1;
                    .radial-statistics {
                        margin: 0 pxToRem(10) 0 pxToRem(30);
                        .radial-progress {
                            // margin: 20px;
                            width: pxToRem(63);
                            height: pxToRem(63);
                            background-color: transparent;
                            border-radius: 50%;
                            .circle {
                                .mask,
                                .fill,
                                .shadow {
                                    width: pxToRem(63);
                                    height: pxToRem(63);
                                    position: absolute;
                                    border-radius: 50%;
                                }
                                .shadow {
                                    box-shadow: pxToRem(6) pxToRem(6)
                                        pxToRem(10) rgba(0, 0, 0, 0.2) inset;
                                }
                                .mask,
                                .fill {
                                    -webkit-backface-visibility: hidden;
                                    transition: -webkit-transform 1s;
                                    transition: -ms-transform 1s;
                                    transition: transform 1s;
                                }
                                .mask {
                                    clip: rect(
                                        0px,
                                        pxToRem(63),
                                        pxToRem(63),
                                        pxToRem(31.5)
                                    );
                                    .fill {
                                        clip: rect(
                                            0,
                                            pxToRem(31.5),
                                            pxToRem(63),
                                            0
                                        );
                                        background: linear-gradient(
                                            to right,
                                            #514a9d,
                                            #24c6dc
                                        );
                                    }
                                }
                            }
                            .inset {
                                width: pxToRem(60);
                                height: pxToRem(60);
                                position: absolute;
                                margin-left: pxToRem(1.5);
                                margin-top: pxToRem(1.5);
                                border-radius: 50%;
                                background: rgb(52, 53, 52);
                                overflow: hidden;
                                border: 5px solid #181a1a;
                                .wave {
                                    // opacity: 0.4;
                                    position: absolute;
                                    top: 3%;
                                    left: 50%;
                                    // background: #454546;
                                    margin-left: pxToRem(-45);
                                    margin-top: pxToRem(-60);
                                    transform-origin: 50% 48%;
                                    border-radius: 43%;
                                }

                                .wave.-one {
                                    width: pxToRem(115);
                                    height: pxToRem(115);
                                    animation: drift 3000ms infinite linear;
                                    background: #364cee;
                                    z-index: 1;
                                }

                                .wave.-two {
                                    width: pxToRem(100);
                                    height: pxToRem(100);
                                    opacity: 0.8;
                                    animation: drift 5000ms infinite linear;
                                    background: #3491da;
                                    z-index: 2;
                                }

                                .wave.-three {
                                    background: #5a3ea4;
                                    opacity: 0.8;
                                    width: pxToRem(98);
                                    height: pxToRem(98);
                                    animation: drift 7000ms infinite linear;
                                    z-index: 3;
                                }

                                .wave.-four {
                                    background: rgb(52, 53, 52);
                                    width: pxToRem(100);
                                    height: pxToRem(90);
                                    animation: drift 5000ms infinite linear;
                                    z-index: 4;
                                }

                                .box:after {
                                    content: "";
                                    display: block;
                                    left: 0;
                                    top: 0;
                                    width: 100%;
                                    height: 100%;
                                    z-index: 11;
                                    transform: translate3d(0, 0, 0);
                                }

                                .wave-percentage {
                                    position: absolute;
                                    left: 0;
                                    top: 0;
                                    width: pxToRem(50);
                                    height: pxToRem(30);
                                    z-index: 5;
                                    line-height: pxToRem(20);
                                    text-align: center;
                                    font-size: pxToRem(10);
                                    font-family: Microsoft YaHei-Regular,
                                        Microsoft YaHei;
                                    font-weight: 400;
                                    color: #ffffff;
                                    text-indent: 0.3em;
                                }

                                @keyframes drift {
                                    from {
                                        transform: rotate(0deg);
                                    }
                                    from {
                                        transform: rotate(360deg);
                                    }
                                }
                            }
                        }
                    }
                    .wave-title {
                        width: 100%;
                        height: pxToRem(30);
                        line-height: pxToRem(30);
                        text-align: center;
                        font-size: pxToRem(12);
                        font-family: Microsoft YaHei-Regular, Microsoft YaHei;
                        font-weight: 400;
                        color: #a8dfff;
                        margin-top: pxToRem(-3);
                        text-indent: -0.3em;
                    }
                }
            }
        }
        .left_three {
            display: flex;
            flex-flow: column nowrap;
            .left_three_top {
                display: flex;
                justify-content: flex-start;
                margin-left: pxToRem(80);
                .left_three_top_title {
                    width: pxToRem(220);
                    height: pxToRem(22);
                    font-size: pxToRem(22);
                    font-family: SourceHanSansCN-Medium;
                    line-height: pxToRem(25);
                    color: #a8dfff;
                    margin-left: pxToRem(10);
                }
            }
            .left_three_bottom {
                display: flex;
                flex-flow: column nowrap;
                margin: pxToRem(5) 0 0 pxToRem(80);
                .left_three_item {
                    display: flex;
                    justify-content: space-between;
                    background-repeat: no-repeat;
                    background-size: 100% 100%;
                    width: pxToRem(280);
                    margin-bottom: pxToRem(10);
                    .left_three_first_rank {
                        margin-left: pxToRem(20);
                        color: #fcfcfe;
                        font-weight: bolder;
                        font-style: oblique;
                        font-size: pxToRem(13);
                    }
                }
            }
        }
    }
    .subPage_left .item:last-of-type {
        background-image: url("../../assets/images/ags/emp/left_panel.png") !important;
        height: 58%;
        background-size: 100% 110%;
        margin-bottom: 0;
    }
    .subPage_left .item:first-of-type {
        background-image: url("../../assets/images/ags/emp/left_frist_panel.png");
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100% 117%;
        height: 40%;
    }
    .subPage_right .item {
        background-image: url("../../assets/images/ags/index/right_panel.png") !important;
    }
    .subPage_right .item:first-of-type {
        height: pxToRem(350);
        background-image: url("../../assets/images/ags/index/right_panel.png") !important;
    }
    .center {
        width: pxToRem(950);
        height: 100%;
        display: flex;
        flex-flow: column nowrap;
        .top {
            width: 100%;
            height: 62%;
            border: pxToRem(3) solid #6bc9ff;
            #map {
                height: 100%;
                width: 100%;
            }
        }
        .bottom {
            margin-top: pxToRem(20);
            width: 100%;
            height: 35%;
            background-image: url("../../assets/images/ags/index/bottom_panel.png");
            background-repeat: no-repeat;
            background-size: 100% 100%;
            display: flex;
            flex-flow: column nowrap;
            .bottom_top {
                display: flex;
                justify-content: flex-start;
                align-items: center;
                margin: pxToRem(26);
                .bottom_top_icon {
                    img {
                        width: pxToRem(42);
                        height: pxToRem(15);
                    }
                }
                .bottom_top_title {
                    width: pxToRem(88);
                    height: pxToRem(22);
                    font-size: pxToRem(16);
                    font-family: SourceHanSansCN-Medium;
                    line-height: pxToRem(15);
                    color: #a8dfff;
                    margin-left: pxToRem(10);
                }
            }
            .bottom_table {
                width: 88%;
                margin: pxToRem(-30) 0 0 pxToRem(60);
                // margin: auto;
                height: pxToRem(230);
                overflow: hidden;
                .t-header {
                    width: 100%;
                    height: pxToRem(35);
                    display: flex;
                    justify-content: flex-start;
                    align-items: center;
                    overflow: hidden;
                    .td {
                        flex: 1;
                        text-align: center;
                        line-height: pxToRem(35);
                        margin-bottom: pxToRem(1);
                        font-size: pxToRem(12);
                        font-family: Microsoft YaHei-Regular, Microsoft YaHei;
                        font-weight: 400;
                        color: #00f0ff;
                    }
                }
                .t-body {
                    width: 100%;
                    height: calc(100% - 0.35rem);
                    overflow: hidden;
                    .tr {
                        height: pxToRem(30);
                        line-height: pxToRem(30);
                        width: 100%;
                        display: flex;
                        margin-bottom: pxToRem(1);
                        &:nth-child(2n-1) {
                            background: #0c1b2b;
                        }
                        .td {
                            flex: 1;
                            text-align: center;
                            line-height: pxToRem(30);
                            font-size: pxToRem(14);
                            font-family: Source Han Sans CN;
                            font-weight: 400;
                            color: #b5eeff;
                            overflow: hidden;
                            text-overflow: ellipsis;
                            white-space: nowrap;
                        }
                    }
                }
            }
        }
    }
    .subPage_right {
        .right_one {
            display: flex;
            flex-flow: column nowrap;
            .right_one_top {
                display: flex;
                justify-content: flex-start;
                margin-left: pxToRem(60);
                margin-top: pxToRem(10);
                .right_one_top_icon {
                    img {
                        width: pxToRem(26);
                        height: pxToRem(25);
                    }
                }
                .right_one_top_title {
                    width: pxToRem(220);
                    height: pxToRem(22);
                    font-size: pxToRem(22);
                    font-family: SourceHanSansCN-Medium;
                    line-height: pxToRem(25);
                    color: #a8dfff;
                    margin-left: pxToRem(10);
                }
            }
            .right_one_bottom {
                display: flex;
                flex-flow: row wrap;
                width: pxToRem(330);
                height: 90%;
                margin-left: pxToRem(50);
                .content_item {
                    width: pxToRem(155);
                    height: 45%;
                    background-color: #0e2e3e;
                    background-image: url("../../assets/images/ags/index/right_one_panel.png");
                    background-repeat: no-repeat;
                    background-size: 100% 100%;
                    display: flex;
                    justify-content: flex-start;
                    align-items: center;
                    .icon {
                        // display: flex;
                        // flex-flow: column nowrap;
                        // align-items: center;
                        margin-left: pxToRem(20);
                        width: pxToRem(60);
                        text-align: center;
                        .icon_user {
                            img {
                                width: pxToRem(32);
                                height: pxToRem(32);
                            }
                        }
                        .emp_count {
                            text-align: center;
                            font-size: pxToRem(12);
                            font-family: Microsoft YaHei-Regular,
                                Microsoft YaHei;
                            font-weight: 400;
                            color: #a8dfff;
                        }
                    }
                    .count {
                        // margin-left: pxToRem(15);
                        width: pxToRem(70);
                        text-align: center;
                        font-size: pxToRem(18);
                        font-family: Microsoft YaHei-Regular, Microsoft YaHei;
                        font-weight: bolder;
                        //  color: #ffffff;
                        //   text-shadow: 0px 0px 7px rgba(52, 255, 204, 0.1);
                        background: linear-gradient(
                            180deg,
                            #a8dfff 0%,
                            #00f0ff 100%
                        );
                        -webkit-background-clip: text;
                        -webkit-text-fill-color: transparent;
                        .scorllText {
                            display: inline-block;
                            animation: textMove 4s linear infinite;
                            animation-fill-mode: forwards;
                        }
                    }
                }
            }
        }
        .right_two {
            display: flex;
            flex-flow: column nowrap;
            .right_two_top {
                display: flex;
                justify-content: flex-start;
                margin-left: pxToRem(60);
                margin-top: pxToRem(10);
                .right_two_top_icon {
                    img {
                        width: pxToRem(28);
                        height: pxToRem(28);
                    }
                }
                .right_two_top_title {
                    width: pxToRem(220);
                    height: pxToRem(22);
                    font-size: pxToRem(22);
                    font-family: SourceHanSansCN-Medium;
                    line-height: pxToRem(25);
                    color: #a8dfff;
                    margin-left: pxToRem(10);
                }
            }
            .right_two_bottom {
                display: flex;
                justify-content: flex-start;
                width: 80%;
                margin-left: pxToRem(40);
                .right_two_bottom_left {
                    display: flex;
                    flex-flow: row wrap;
                    width: pxToRem(98);
                    height: pxToRem(125);
                    margin: pxToRem(20) pxToRem(5) 0 0;
                    .right_two_bottom_item {
                        display: flex;
                        flex-flow: column nowrap;
                        .right_two_bottom_icon {
                            .count {
                                display: inline-block;
                                margin-left: pxToRem(20);
                                font-family: "led regular";
                                font-size: pxToRem(36);
                                color: #00f0ff;
                                width: pxToRem(35);
                                line-height: pxToRem(32);
                                overflow: hidden;
                                .scorllText {
                                    display: inline-block;
                                    animation: textMove 4s linear infinite;
                                    animation-fill-mode: forwards;
                                }
                            }
                            img {
                                width: pxToRem(32);
                                height: pxToRem(32);
                            }
                        }
                        .right_two_bottom_unit {
                            font-size: pxToRem(12);
                            color: #97a6b5;
                            margin: 0 0 0 pxToRem(5);
                        }
                    }
                }
                .right_two_bottom_right {
                    display: flex;
                    flex-flow: column nowrap;
                    width: pxToRem(230);
                    height: pxToRem(140);
                    background-image: url("../../assets/images/ags/index/right_two_panel.png");
                    background-repeat: no-repeat;
                    background-size: 100% 100%;
                    margin: pxToRem(10) 0 0 0;
                    .right_two_bottom_top {
                        display: flex;
                        justify-content: flex-start;
                        margin: pxToRem(10) 0 pxToRem(10) pxToRem(12);
                        .name {
                            width: pxToRem(85);
                            font-size: pxToRem(16);
                            font-family: Microsoft YaHei-Regular,
                                Microsoft YaHei;
                            font-weight: 400;
                            color: #d8f0fe;
                            white-space: nowrap;
                        }
                        .job {
                            width: pxToRem(55);
                            text-align: left;
                            margin: pxToRem(4) 0 0 pxToRem(6);
                            font-size: pxToRem(12);
                            white-space: nowrap;
                            font-family: Microsoft YaHei-Regular,
                                Microsoft YaHei;
                            font-weight: 400;
                            color: #8497a3;
                        }
                    }
                    .right_two_bottom_bottom {
                        display: flex;
                        justify-content: flex-start;
                        .icon {
                            margin: pxToRem(-5) 0 0 pxToRem(12);
                            img {
                                width: pxToRem(82);
                                height: pxToRem(88);
                            }
                        }
                        .introduction {
                            display: flex;
                            flex-flow: column nowrap;
                            .introduction_item {
                                .top {
                                    display: flex;
                                    justify-content: flex-start;
                                    margin-top: pxToRem(8);
                                    .icon {
                                        width: pxToRem(7);
                                        height: pxToRem(7);
                                        border-radius: 50%;
                                        background: #00f0ff;
                                    }
                                    .title {
                                        margin: pxToRem(-6) 0 0 pxToRem(8);
                                        font-size: pxToRem(12);
                                        font-family: Microsoft YaHei-Regular,
                                            Microsoft YaHei;
                                        font-weight: 400;
                                        color: #a8dfff;
                                        line-height: pxToRem(10);
                                    }
                                }
                                .bottom {
                                    width: pxToRem(102);
                                    white-space: nowrap;
                                    text-overflow: ellipsis;
                                    overflow: hidden;
                                    margin: pxToRem(5) 0 0 pxToRem(25);
                                    font-size: pxToRem(12);
                                    font-family: Microsoft YaHei-Regular,
                                        Microsoft YaHei;
                                    font-weight: 400;
                                    color: #a8dfff;
                                }
                            }
                            .introduction_item:last-of-type {
                                margin-top: pxToRem(10);
                            }
                        }
                    }
                }
            }
        }
        .right_three {
            display: flex;
            flex-flow: column nowrap;
            .right_three_top {
                display: flex;
                justify-content: flex-start;
                margin-left: pxToRem(60);
                margin-top: pxToRem(10);
                .right_three_top_icon {
                    img {
                        width: pxToRem(28);
                        height: pxToRem(24);
                    }
                }
                .right_three_top_title {
                    width: pxToRem(220);
                    height: pxToRem(22);
                    font-size: pxToRem(22);
                    font-family: SourceHanSansCN-Medium;
                    line-height: pxToRem(20);
                    color: #a8dfff;
                    margin-left: pxToRem(10);
                }
            }
            .right_three_bottom {
                display: flex;
                justify-content: flex-start;
                width: 80%;
                margin-left: pxToRem(40);
                .right_three_bottom_left {
                    display: flex;
                    flex-flow: row wrap;
                    width: pxToRem(98);
                    height: pxToRem(125);
                    margin: pxToRem(20) pxToRem(5) 0 0;
                    .right_three_bottom_item {
                        display: flex;
                        flex-flow: column nowrap;
                        .right_three_bottom_icon {
                            .count {
                                display: inline-block;
                                margin-left: pxToRem(20);
                                font-family: "led regular";
                                font-size: pxToRem(36);
                                color: #00f0ff;
                                width: pxToRem(35);
                                line-height: pxToRem(32);
                                overflow: hidden;
                                .scorllText {
                                    display: inline-block;
                                    animation: textMove 4s linear infinite;
                                    animation-fill-mode: forwards;
                                }
                            }
                            img {
                                width: pxToRem(32);
                                height: pxToRem(32);
                            }
                        }
                        .right_three_bottom_unit {
                            font-size: pxToRem(12);
                            color: #97a6b5;
                            margin: 0 0 0 pxToRem(5);
                        }
                    }
                }
                .right_three_bottom_right {
                    display: flex;
                    flex-flow: column nowrap;
                    width: pxToRem(230);
                    height: pxToRem(140);
                    background-image: url("../../assets/images/ags/index/right_two_panel.png");
                    background-repeat: no-repeat;
                    background-size: 100% 100%;
                    margin: pxToRem(10) 0 0 0;
                    .right_three_bottom_top {
                        display: flex;
                        justify-content: flex-start;
                        margin: pxToRem(10) 0 pxToRem(10) pxToRem(12);
                        .name {
                            width: pxToRem(85);
                            font-size: pxToRem(16);
                            font-family: Microsoft YaHei-Regular,
                                Microsoft YaHei;
                            font-weight: 400;
                            color: #d8f0fe;
                            white-space: nowrap;
                        }
                        .job {
                            width: pxToRem(55);
                            text-align: left;
                            margin: pxToRem(4) 0 0 pxToRem(6);
                            white-space: nowrap;
                            font-size: pxToRem(12);
                            font-family: Microsoft YaHei-Regular,
                                Microsoft YaHei;
                            font-weight: 400;
                            color: #8497a3;
                        }
                    }
                    .right_three_bottom_bottom {
                        display: flex;
                        justify-content: flex-start;
                        .icon {
                            margin: pxToRem(-5) 0 0 pxToRem(12);
                            img {
                                width: pxToRem(82);
                                height: pxToRem(88);
                            }
                        }
                        .introduction {
                            display: flex;
                            flex-flow: column nowrap;
                            .introduction_item {
                                .top {
                                    display: flex;
                                    justify-content: flex-start;
                                    margin-top: pxToRem(8);
                                    .icon {
                                        width: pxToRem(7);
                                        height: pxToRem(7);
                                        border-radius: 50%;
                                        background: #00f0ff;
                                    }
                                    .title {
                                        margin: pxToRem(-6) 0 0 pxToRem(8);
                                        font-size: pxToRem(12);
                                        font-family: Microsoft YaHei-Regular,
                                            Microsoft YaHei;
                                        font-weight: 400;
                                        color: #a8dfff;
                                        line-height: pxToRem(10);
                                    }
                                }
                                .bottom {
                                    width: pxToRem(102);
                                    white-space: nowrap;
                                    text-overflow: ellipsis;
                                    overflow: hidden;
                                    margin: pxToRem(5) 0 0 pxToRem(25);
                                    font-size: pxToRem(12);
                                    font-family: Microsoft YaHei-Regular,
                                        Microsoft YaHei;
                                    font-weight: 400;
                                    color: #a8dfff;
                                }
                            }
                            .introduction_item:last-of-type {
                                margin-top: pxToRem(10);
                            }
                        }
                    }
                }
            }
        }
    }
    //波浪效果
    @keyframes rotate {
        50% {
            transform: translate(-50%, -73%) rotate(180deg);
        }
        100% {
            transform: translate(-50%, -70%) rotate(360deg);
        }
    }
}
.canvas-center-box {
    position: absolute;
    width: pxToRem(50);
    height: pxToRem(50);
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    .num {
        font-size: pxToRem(28);
        font-family: "led regular";
        font-weight: bold;
        color: #ffffff;
        text-align: center;
        margin-top: pxToRem(-10);
    }
    .text {
        margin-top: pxToRem(-10);
        font-size: pxToRem(9);
        transform: scale(0.75);
        white-space: nowrap;
        font-family: Microsoft YaHei-Regular, Microsoft YaHei;
        font-weight: 400;
        color: #ffffff;
    }
}
/deep/#map.diy {
    .amap-marker {
        width: auto !important;
        height: auto !important;
    }
    .amap-marker-content {
        width: 25px !important;
        height: 25px !important;
        .marker-icon {
            position: relative;
            width: 25px !important;
            height: 25px !important;
            background: rgba(42, 200, 242, 0.2);
            border-radius: 50%;
            -webkit-animation: map-scale-animation 2s alternate !important;
            animation: map-scale-animation 2s infinite !important;
            &::after {
                display: block;
                content: "";
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
                width: pxToRem(13);
                height: pxToRem(13);
                border-radius: 50%;
                background-color: rgba(128, 209, 255, 1);
                z-index: 2;
            }
            img {
                display: none !important;
            }
        }
    }
    .amap-marker-label {
        position: absolute;
        top: 25px !important;
        left: 80px !important;
        transform: translate(0%, -40%) !important;
        //margin-top: -25px;
        .marker-title {
            height: pxToRem(55);
            border-top: 2px solid #6bc9ff;
            border-bottom: 2px solid #6bc9ff;
            box-sizing: border-box;
            background-color: rgba(155, 198, 223, 0.6);
            font-size: pxToRem(14);
            font-family: Source Han Sans CN;
            font-weight: 400;
            color: #156695;
            text-align: center;
            padding: pxToRem(3) pxToRem(15);
            .p {
                max-width: pxToRem(280);
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
                line-height: pxToRem(22);
            }
        }
    }
}
@keyframes textMove {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-60px);
    }
}
</style>
